<!DOCTYPE html>
<!--suppress SpellCheckingInspection, HtmlFormInputWithoutLabel -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>药品类型</title>
    <link rel="stylesheet" href="../static/css/mdui.min.css" th:href="@{/css/mdui.min.css}">
    <link rel="stylesheet" href="../static/css/wangEditor-fullscreen-plugin.css" th:href="@{/css/wangEditor-fullscreen-plugin.css}">
</head>
<body class="mdui-appbar-with-toolbar mdui-drawer-body-left mdui-theme-primary-teal mdui-theme-accent-pink">
<div th:replace="_widgets::header"></div>
<div th:replace="_widgets::drawer"></div>
<div class="mdui-container mdui-p-t-2 mdui-p-b-2">
    <form method="post" action="/information" th:object="${information}">
        <input type="hidden" name="id" th:value="*{id}">
        <input type="hidden" name="_method" value="PUT" th:if="*{id!=null}">
        <div class="mdui-row">
            <div class="mdui-col-md-9 mdui-textfield">
                <label class="mdui-textfield-label">社区信息标题</label>
                <input name="title" class="mdui-textfield-input" type="text" maxlength="64" required th:value="*{title}"/>
                <div class="mdui-textfield-error">请输入信息标题</div>
            </div>
            <div class="mdui-col-md-3 mdui-textfield">
                <label class="mdui-textfield-label">社区信息类型</label>
                <select name="type" class="mdui-select" required style="width: 100%">
                    <option value="">请选择信息类型</option>
                    <option th:each="type:${informationTypes}" th:text="${type.type}"
                            th:value="${type.type}" th:selected="${type.type eq information.type}">类型</option>
                </select>
                <div class="mdui-typo-caption mdui-m-t-1" style="color: #F44336" th:if="${#lists.isEmpty(informationTypes)}">
                    请先添加信息类型
                </div>
            </div>
        </div>
        <div class="mdui-row mdui-textfield">
            <label class="mdui-textfield-label">社区信息内容</label>
            <div id="editor" th:utext="*{content}"></div>
            <input id="content" type="hidden" name="content">
        </div>

        <div class="mdui-row">
            <button class="mdui-btn mdui-color-theme-accent mdui-ripple mdui-btn-raised mdui-center" type="submit">
                <i class="mdui-icon mdui-icon-left material-icons">&#xe161;</i>
                保存
            </button>
        </div>
    </form>
</div>
<script src="../static/js/mdui.min.js" th:src="@{/js/mdui.min.js}"></script>
<script src="../static/js/jquery-2.1.1.js" th:src="@{/js/jquery-2.1.1.js}"></script>
<script src="../static/js/wangEditor.min.js" th:src="@{/js/wangEditor.min.js}"></script>
<script src="../static/js/wangEditor-fullscreen-plugin.js" th:src="@{/js/wangEditor-fullscreen-plugin.js}"></script>
</body>
<script>
    var $$ = mdui.JQ;
    var listItem = $$('#information');
    listItem.addClass('mdui-list-item-active');
    listItem.parent().parent().addClass('mdui-collapse-item-open');

    var E = window.wangEditor;
    var editor = new E('#editor');
    var $content = $('#content');
    editor.customConfig.uploadImgShowBase64 = true;
    editor.customConfig.onchange = function (html) {
        // 监控变化，同步更新到 textarea
        $content.val(html)
    };
    editor.create();
    E.fullscreen.init('#editor');
    // 初始化 textarea 的值
    $content.val(editor.txt.html())
</script>
</html>